<template>
  <view class="register-body">
    <view>
      <u-steps :list="stepDefault.list" :current="stepDefault.current"></u-steps>
      <view v-if="stepDefault.current === 0">
        <button type="primary" open-type="getPhoneNumber" @getphonenumber="getUserPhoneNumber">点击授权注册</button>
      </view>

      <view v-if="stepDefault.current === 1">
        <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo">获取用户信息</button>
      </view>

      <view v-if="stepDefault.current === 1">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="avatarUrl"></image>
        </button>

        <view style="height: 600rpx;width: 100%">
          <u-form :model="form" ref="form1" label-width="150rpx">
            <u-form-item label="昵称" prop="nickName">
              <u-input v-model="form.nickName"/>
            </u-form-item>
            <u-form-item label="手机号" prop="phoneNumber">
              <u-input v-model="form.phoneNumber"/>
            </u-form-item>
            <u-form-item label="登录密码" prop="password">
              <u-input v-model="form.password"/>
            </u-form-item>
            <u-form-item label="部门" prop="deptLabel">
              <u-input v-model="form.deptLabel" type="select" @click="$refs.cascaderRef.open(deptDefault.value)"/>
            </u-form-item>

          </u-form>
          <ld-cascader ref="cascaderRef" v-model:value="deptDefault.value" :list="deptDefault.list"
                       :show-input="false"></ld-cascader>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {wechatGetMobile, wechatDeptTree} from '@/api/api-weixin'

export default {
  data() {
    return {
      codeUrl: '',
      openid: null,
      avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
      form: {
        username: '',
        nickName: '',
        password: '',
        phoneNumber: '',
        deptLabel: ''
      },
      registerBtn: true,

      deptDefault: {
        show: false,
        value: [],
        list: [
          {
            value: 1,
            label: '中国',
            children: [
              {
                value: 2,
                label: '广东',
                children: [
                  {
                    value: 3,
                    label: '深圳'
                  },
                  {
                    value: 4,
                    label: '广州'
                  }
                ]
              },
              {
                value: 5,
                label: '广西',
                children: [
                  {
                    value: 6,
                    label: '南宁'
                  },
                  {
                    value: 7,
                    label: '桂林'
                  }
                ]
              }
            ]
          },
          {
            value: 8,
            label: '美国',
            children: [
              {
                value: 9,
                label: '纽约',
                children: [
                  {
                    value: 10,
                    label: '皇后街区'
                  }
                ]
              }
            ]
          }
        ]
      },
      stepDefault: {
        current: 0,
        list: [
          {name: '授权注册'},
          {name: '授权用户信息'},
          {name: '基本信息'},
        ]
      },

    }
  },
  methods: {
    onChooseAvatar(e) {
      console.log('头像选择', e.detail.avatarUrl);

      this.avatarUrl = e.detail.avatarUrl

      //将头像保存到后端
      uni.uploadFile({
        url: '后端服务器地址',
        filePath: e.detail.avatarUrl, //头像文件
        header: {},
        formData: {},
        name: '文件对应的 key,开发者在服务器端通过这个key可以获取到文件二进制内容',
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data);
        }
      })
    },
    getUserPhoneNumber(e) {
      const that = this
      wechatGetMobile(e.detail.code).then(({data}) => {
        that.form.phoneNumber = data.phoneNumber
        that.form.password = data.phoneNumber.substring(data.phoneNumber.length - 4)
        that.stepDefault.current = 1


      })
    },
    getuserinfo(e) {
      console.log(e)
      let that = this
      uni.getUserInfo({
        provider: 'weixin',
        lang: 'zh_CN',
        success: ({userInfo}) => {
          console.log('用户信息', userInfo)
          that.form.nickName = userInfo.nickName
          that.form.sex = userInfo.gender
        }
      })
    },
    deptConfirm(e) {
      this.form.deptId = e[e.length - 1]['value']
      this.form.deptLabel = e.map(t => t.label).join('/')
    }
  },
  onLoad(option) {
    // console.log(option)
    this.openid = option.openId
    let that = this
    wechatDeptTree(this.openid).then(({data}) => {
      // console.log('部门树列表', data)
      that.deptDefault.list = data
    })


  },
}
</script>

<style lang="scss" scoped>
.register-body {
  background-color: #f1f1f1;
}
</style>
